<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;overflow-x: hidden;overflow-y: auto;">
        <div class="excelUpload">
            <div>
                <span @click="goAddresslist">通讯录</span>
                <span>&gt团队邀请</span>
                <div class="openInvite" @click="openInviteClick">
                    <div v-if="isOpenInvite == 0">
                        关闭此功能
                    </div>
                    <div v-else>
                        打开此功能
                    </div>
                </div>
            </div>
            <div v-show="isOpenInvite == 0">
                <div class="teambuild">
                    通过链接邀请
                    <div class="copy" @click="copyClick">
                        复制链接
                    </div>
                </div>
                <div class="urlCss">
                    <span>这是伯通邀请链接</span>
                    <div @click="urlClick">
                        {{copyMddel}}
                    </div>
                    <textarea name="" id="copys" cols="30" rows="10">{{copyMddel}}</textarea>
                </div>
                <div class="teambuild">团队二维码</div>
                <div class="QRcodeClass">
                    <canvas id="canvas"></canvas>
                    <div>右键复制或者下载此二维码，发送给好友。</div>
                </div>
            </div>
            <div class="teambuild">申请人列表</div>
            <div>
                <ul>
                    <li v-show="applyForList.length == 0">暂无数据</li>
                    <li class="list" v-for="(item,index) in applyForList">
                        <div>
                            <img :src="imgs" alt="申请人头像" title="申请人头像">
                        </div>
                        <div class="listDetails">
                            <div>{{item.nick}}</div>
                            <div>{{item.phone}}</div>
                        </div>
                        <div v-show="item.state == 0" class="applyBut">
                            <div @click="applyButClick(index)">
                                同意
                            </div>
                            <div @click="applyButAnges(index)">
                                <select v-model="applyModel" @change="applyButAnge">
                                    <option v-for="(type,index) in applySelect" v-bind:value="type.key" :key="type.value">{{type.value}}</option>
                                </select>
                            </div>
                        </div>
                        <div v-show="item.state == 1" class="applyFont">
                            已接受
                        </div>
                        <div v-show="item.state == 2" class="applyFont">
                            已拒绝
                        </div>
                        <div v-show="item.state == 3" class="applyFont">
                            已屏蔽
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
    require("../../../api/api.js");
    import Vue from 'vue'
    import { mapActions } from "vuex"
    import QRCode from 'qrcode'
    Vue.use(QRCode)
    export default {
        name: "set",
        data() {
            return {
                applyForList: [],
                imgs: "/static/img/1.jpg",
                copyMddel: 'https://api.botong.tech/user/'+sessionStorage.getItem('orgId')+'/'+sessionStorage.getItem('phoneVal'),
                applySelect: [
                    { value: '请选择', key: "QXZ" },
                    { value: '拒绝', key: "2" },
                    { value: '屏蔽', key: "3" }
                ],
                applyModel: "QXZ",    //申请人操作
                isOpenInvite: 0,    //邀请功能
                applystate: '',     //处理结果
                applyIndex: '',     //申请人列表index
            }
        },
        created: function () {
            console.log("sdfldkhgkdhk")
            var self = this
            self.getteamgetTeamInvite({
                oid: sessionStorage.getItem('orgId'),
                uid: sessionStorage.getItem('userId'),
            }).then(data => {
                console.log("获取企业团队邀请：", data)
                if (data.code == '000000') {
                    if (data.data) {
                        self.applyForList = data.data.applyList
                        self.isOpenInvite = data.data.isOpenInvite
                    } else {
                        self.$message({
                            type: 'info',
                            message: '获取数据失败！'
                        })
                    }
                } else {
                    self.$message({
                        type: 'info',
                        message: '获取数据失败！'
                    })
                }

            }).catch(msg => {
                self.$message({
                    type: 'info',
                    message: '获取数据失败！'
                })
            })
        },
        watch: {},
        methods: {
            goAddresslist() {
                this.$router.push({
                    path: "/home/addresslist"
                });
            },
            //复制事件
            copyClick() {
                var Url2 = document.getElementById("copys");
                Url2.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                alert("已复制好，可贴粘。");
            },
            //点击跳转
            urlClick() {
                window.open(this.copyMddel)
            },
            //生成二维码
            useqrcode() {
                var canvas = document.getElementById('canvas')
                QRCode.toCanvas(canvas, this.copyMddel, function (error) {
                    if (error) console.error(error)
                    console.log('success!')
                })
            },
            //开启/关闭邀请功能
            openInviteClick() {
                var open
                if (this.isOpenInvite == 0) {
                    open = 1
                } else {
                    open = 0
                }
                var self = this
                self.getopenInvite({
                    oid: sessionStorage.getItem('orgId'),
                    uid: sessionStorage.getItem('userId'),
                    isOpenInvite: open,
                }).then(data => {
                    console.log("开启/关闭：", data)
                    if (data.code == '000000') {
                        this.isOpenInvite = open
                    } else {
                        self.$message({
                            type: 'info',
                            message: '操作失败！'
                        })
                    }
                }).catch(msg => {
                    self.$message({
                        type: 'info',
                        message: '操作失败！'
                    })
                })
            },
            //同意
            applyButClick(index) {
                this.applyIndex = index
                this.applystate = 1
                this.operation()
            },
            //拒绝/屏蔽点击
            applyButAnges(index) {
                this.applyIndex = index
            },
            //拒绝/屏蔽下拉
            applyButAnge() {
                if (this.applyModel == "QXZ") {
                    return
                } else {
                    this.applystate = this.applyModel
                    this.operation()
                }
            },
            //申请人操作接口
            operation() {
                // console.log("状态：",this.applystate)
                // console.log("id:",this.applyForList[this.applyIndex].inId)
                var self = this
                self.getmodifyApplyInfo({
                    oid: sessionStorage.getItem('orgId'),
                    uid: sessionStorage.getItem('userId'),
                    applyId: self.applyForList[this.applyIndex].id,
                    state: self.applystate,
                }).then(data => {
                    console.log("申请人操作", data)
                    if (data.code == '000000') {
                        self.applyForList[self.applyIndex].state = self.applystate
                    } else {
                        self.$message({
                            type: 'info',
                            message: '操作失败！'
                        })
                    }
                }).catch(msg => {
                    self.$message({
                        type: 'info',
                        message: '操作失败！'
                    })
                })
            },
            ...mapActions(['getteamgetTeamInvite', 'getopenInvite', 'getmodifyApplyInfo'])
        },
        mounted() {
            //生成二维码
            this.useqrcode();
        }
    };

</script>
<style scoped>
    p {
        margin-bottom: 20px;
    }

    .active {
        background-color: rgba(228, 74, 17, 0.6);
        color: #fff;
    }

    input[type="file"] {
        display: none;
    }

    label {
        margin-bottom: 0;
        font-weight: normal;
        color: #fff;
        width: 68px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        background-color: #e7744a;
        margin-left: 5px;
        text-align: center;
        cursor: pointer;
    }

    .excelUpload {
        width: 1008px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .excelUpload>div:nth-child(1) {
        margin-top: 30px;
    }

    .excelUpload>div:nth-child(1) div {
        float: right;
        height: 20px;
        line-height: 20px;
        width: 70px;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
    }

    .openInvite {
        border: 1px solid #888888;
        border-radius: 3px;
    }

    .excelUpload>div {
        margin-bottom: 30px;
    }

    .excelUpload>div:nth-child(1)>span:nth-child(1) {
        color: #e7744a;
        cursor: pointer;
    }

    .teambuild {
        margin-bottom: 20px;
        width: 100%;
        background: #e7744a;
        padding: 9px;
        color: #ffffff;
        border: 1px solid #e7744a;
        border-radius: 4px;
    }

    .urlcss {
        color: blue;
    }

    .copy {
        float: right;
        cursor: pointer;
    }

    .QRcodeClass {
        display: flex;
    }

    .QRcodeClass>div:nth-child(1) {
        width: 100px;
        height: 100px;
    }

    .QRcodeClass>div:nth-child(2) {
        height: 14px;
        width: 280px;
        padding: 83px 0 0 10px;
    }

    .list {
        padding-top: 15px;
        padding-bottom: 15px;
        display: flex;
        border-bottom: 1px solid #d1d1d1;
    }

    .list>div:nth-child(1) {
        width: 50px;
        height: 50px;
        border-radius: 100%;
    }

    .list>div:nth-child(1) img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
    }

    .listDetails {
        width: 77%;
        margin-left: 10px;
    }

    .listDetails div {
        height: 24px;
        line-height: 24px;
    }

    .urlCss {
        display: flex;
        margin-bottom: 20px!important;
    }

    .urlCss div {
        min-width: 50px;
        height: 24px;
        padding-left: 8px;
        margin: 0!important;
        cursor: pointer;
    }

    .urlCss div:hover {
        color: blue;
        text-decoration: underline;
    }

    textarea {
        height: 0px;
        background: white;
        border: none;
        position: relative;
        top: -1000px;
        left: -1000px;
    }

    #canvas {
        width: 100px;
        height: 100px;
        cursor: pointer;
    }

    .applyBut {
        display: flex;
        margin-top: 10px;
    }

    .applyBut>div:nth-child(1) {
        width: 75px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        margin-right: 5px;
        color: white;
        background: #e7744a;
        border-radius: 4px;
        cursor: pointer;
    }

    .applyFont {
        margin-top: 10px;
        width: 160px;
        height: 32px;
        line-height: 32px;
        text-align: center;
    }

    select {
        width: 75px;
        height: 32px;
        line-height: 32px;
        padding-left: 10px;
        color: #8f8e94;
        border-radius: 3px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url("/static/img/blueArrows.jpg") 92% 12px no-repeat transparent;
        font-size: 14px;
        color: #97969b;
        border: 1px solid #aeaeae;
        overflow: hidden;
        cursor: pointer;
    }

    select::-ms-expand {
        display: none;
    }
</style>